<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫画网站 - 主要角色</title>
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/styles.css">
    <!-- jQuery 和 Bootstrap 4 JS -->
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/scripts.js"></script>
</head>

<body>
    <!-- 统一导航栏 -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="index.html"><img class="img-fluid" src="img/logo.png" style="height: 40px;"></a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item active"><a class="nav-link" href="about.html">主要角色</a></li>
                <li class="nav-item"><a class="nav-link" href="story.html">故事背景</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">联系作者</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown">
                        更多 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">故事介绍</a></li>
                        <li><a class="dropdown-item" href="#">漫画截图</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主要角色内容 -->
    <div class="container text-center" id="band">
        <h3 class="mt-5 pt-5">主要角色</h3>
        <p><em>日月同错</em></p>
        <p class="d-none d-md-block text-left">
            《日月同错》讲述了在这个世界上，有无数以人的生气为食的不死之物，他们形态各异，以人为食，寿与天齐，千万年以来都有修习法术之人与他们对抗，但都以失败告终，
            直到三真法门的出现，姜明子、浩光、星炼三位传人在三个时代同时针对不死尸作战的故事。</p>
    </div>
    <div class="container mb-5">
        <div class="row">
            <div class="col-sm-4">
                <div class="character-card">
                    <p class="text-center"><strong>姜明子</strong></p>
                    <a data-toggle="collapse" href="#姜明子">
                        <img src="img/姜明子.jpg" class="img-fluid rounded-circle mb-4 person" alt="姜明子" width="250"
                            height="250">
                    </a>
                    <div id="姜明子" class="collapse">
                        <p><em>常世万法仙君</em></p>
                        <p>大三真法门的祖师之一，所处时期为公元525年，被后世认为是冠古绝今的史上最强求法者，被誉为"常世万法仙君"。实力之强横</p>
                        <button class="btn btn-dark btn-sm toggle-content" data-toggle="modal" data-target="#姜明子Modal">更多详情</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="character-card">
                    <p class="text-center"><strong>高浩光</strong></p>
                    <a data-toggle="collapse" href="#高浩光">
                        <img src="img/高浩光.jpg" class="img-fluid rounded-circle mb-4 person" alt="高浩光" width="250"
                            height="250">
                    </a>
                    <div id="高浩光" class="collapse">
                        <p><em>无道极法魔君</em></p>
                        <p>三真同月令选中的三名传人之一，三真法门第218代门主,未来被求法世界称为"无道极法魔君"，法符已接近极致，被誉为神通世界千年来的巅峰</p>
                        <button class="btn btn-dark btn-sm toggle-content" data-toggle="modal" data-target="#高浩光Modal">更多详情</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="character-card">
                    <p class="text-center"><strong>段星炼</strong></p>
                    <a data-toggle="collapse" href="#段星炼">
                        <img src="img/段星练.jpg" class="img-fluid rounded-circle mb-4 person" alt="段星炼" width="250"
                            height="250">
                    </a>
                    <div id="段星炼" class="collapse">
                        <p><em>窃业仙</em></p>
                        <p>三真同月令选中的三名传人之一，是三真法门最后一位传人，现代剧情线中的核心角色。其称号的演变也映射了从"依赖者"到"当世第一求法者"的成长轨迹</p>
                        <button class="btn btn-dark btn-sm toggle-content" data-toggle="modal" data-target="#段星炼Modal">更多详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 姜明子模态框 -->
    <div class="modal fade" id="姜明子Modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">姜明子 - 常世万法仙君</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>姜明子作为三真法门的创始人之一，拥有无与伦比的求法天赋。他独创的"明子剑"能够远程击杀法尸，在第二次因果战争中单杀尸仙一次，并通过远程投放明子剑支援公孙灵杀尸仙一次。他还以因果律之罚的方式单杀同时期的万业首席岁远，并在因果之战中一对十一取胜，覆灭忘川术院。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 高浩光模态框 -->
    <div class="modal fade" id="高浩光Modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">高浩光 - 无道极法魔君</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>高浩光作为三真法门的传人，在第三次因果战争中发挥了关键作用。他的法符造诣达到了前所未有的高度，能够以一人之力对抗多位大神通者。高浩光的战斗风格狂暴而精准，常常能在瞬间决定战局。他的"无道极法"被认为是打破常规的存在，能够无视许多传统法术的限制。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 段星炼模态框 -->
    <div class="modal fade" id="段星炼Modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">段星炼 - 窃业仙</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>段星炼作为三真法门的最后传人，在第四次因果战争中展现了惊人的成长。他通过"窃业"能力夺取了尸仙的因果，独自对抗古今见证者与太上法尊。段星炼的战斗智慧极高，擅长利用环境和对手的弱点。从最初的依赖他人到成为当世第一求法者，他的成长轨迹是《日月同错》中最引人注目的故事线之一。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>